<template>
  <div >
    <form-head @onSubmit="onSubmit" :is_change="is_change"/>
    <el-form ref="form" :rules="rules" :model="form" label-width="100px" class="layout-all form-width">
      <el-form-item label="标题:" prop="title">
        <el-input v-model="form.title" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="使用比例:" prop="scale">
        <el-input v-model="form.scale" placeholder="请输入使用比例" />
      </el-form-item>
      <el-form-item label="是否提现:" prop="is_withdraw">
        <el-switch
          v-model="form.is_withdraw"
          active-color="#13ce66"
          inactive-color="#ff4949"
        />
      </el-form-item>
      <el-form-item label="提现比例:" prop="withdraw_scale">
        <el-input v-model="form.withdraw_scale" placeholder="请输入提现比例" />
      </el-form-item>
      <el-form-item label="是否充值:" prop="is_recharge">
        <el-switch
          v-model="form.is_recharge"
          active-color="#13ce66"
          inactive-color="#ff4949"
        />
      </el-form-item>
      <el-form-item label="充值比例:" prop="recharge_scale">
        <el-input v-model="form.recharge_scale" placeholder="请输入充值比例" />
      </el-form-item>
      <el-form-item label="是否购买发放:" prop="is_grant">
        <el-switch
          v-model="form.is_grant"
          active-color="#13ce66"
          inactive-color="#ff4949"
        />
      </el-form-item>
      <el-form-item label="发放比例:" prop="grant_scale">
        <el-input v-model="form.grant_scale" placeholder="请输入发放比例" />
      </el-form-item>
      <el-form-item label="最低使用:" prop="min_use">
        <el-input v-model="form.min_use" placeholder="请输入最低使用" />
      </el-form-item>
      <el-form-item label="是否启用:" prop="status">
        <el-switch
          v-model="form.status"
          active-color="#13ce66"
          inactive-color="#ff4949"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
    name:'system_form',
  data() {
    return {
      id: 0,
      is_change: undefined,
      form: {},
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        scale: [
          { required: true, message: '请输入使用比例', trigger: 'blur' }
        ],
        withdraw_scale: [
          { required: true, message: '请输入提现比例', trigger: 'blur' }
        ],
        recharge_scale: [
          { required: true, message: '请输入使用比例', trigger: 'blur' }
        ],
        grant_scale: [
          { required: true, message: '请输入充值比例', trigger: 'blur' }
        ],
        min_use: [
          { required: true, message: '请输入最低使用', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.id = (this.$route.params && this.$route.params.id)||0
    this.$setTagsViewTitle(this.id)
    this.init_into()
  },
  methods: {
    // 图片上传完成
    handleAvatarSuccess_url(res, file) {
      this.url = file.response.data.path
      this.form.url = file.response.data.path
    },
    // 封面上传完成
    handleAvatarSuccess_thumb(res, file) {
      this.form.thumb = file.response.data.path
      this.thumb = file.response.data.path
    },
    // 限制图片大小格式
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 提交
    onSubmit(formName) {
      const form = this.form
      console.log(form)
      this.$refs[formName].validate(valid => {
        if (valid) {
          form.id = this.id
          form.status === true ? form.status = 1 : form.status = 0
          form.is_withdraw === true ? form.is_withdraw = 1 : form.is_withdraw = 0
          form.is_recharge === true ? form.is_recharge = 1 : form.is_recharge = 0
          form.is_grant === true ? form.is_grant = 1 : form.is_grant = 0
          this.get('/admin/MoneyScaleRules/save', form, 'POST').then(e => {
            this.$msg_ok('success', '保存成功')
            this.$router.back()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
      console.log('submit!')
    },
    // 返回
    bk() {
      this.$router.back()
    },
    // 获取当前数据
    init_into() {
      this.get('/admin/MoneyScaleRules/info?id=' + this.id, 'POST').then(e => {
        const tpl = e.info.tpl
        tpl.status === 1 || tpl.status === '' ? tpl.status = true : tpl.status = false
        tpl.is_withdraw === 1 || tpl.is_withdraw === '' ? tpl.is_withdraw = true : tpl.is_withdraw = false
        tpl.is_recharge === 1 || tpl.is_recharge === '' ? tpl.is_recharge = true : tpl.is_recharge = false
        tpl.is_grant === 1 || tpl.is_grant === '' ? tpl.is_grant = true : tpl.is_grant = false
        this.form = tpl
        setTimeout(()=>{this.is_change=false},100)
      })
    }
  },
  watch: {
    form:{
      handler (val, oldVal) {
        if(this.is_change!=undefined)
          this.is_change=true
      },
      deep:true
    }
  }
}
</script>

<style>
.layout-all {
  margin: 10px;
}
</style>
